import React,{useState,useEffect} from "react";
import { Button, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import MyNotification from "../../components/MyNotification/MyNotification";
import {$administrator} from "../../api/administratorapi";
import './administrator.scss';
import logo from "../../resource/logo.png";

export default function Administrator(){
    //通知框状态
    const [notiMsg, setNotiMsg] = useState({ type: "", description: "" });
    //表单
    const [form] = Form.useForm();
    const onFinish = async (values) => {
        const response = await $administrator(values);
         let token=response.data.token;
        localStorage.setItem('token', token);
        const{code,message,data}=response;
        if (code) {
            setNotiMsg({ type: "success", description: message });
        } else {
            setNotiMsg({ type: "error", description: message })
        }
    };
    //导航
    const navigate = useNavigate();
    useEffect(() => {
        if (notiMsg.type === "success") {
            navigate("/adminilayout");
        }
    }, [notiMsg]);
    return(
        <div className='administrator'>
            <div className='left' style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
                <img src={logo} style={{width: '150px', height: '150px'}}/>
            </div>
            <div className='right'>
                <div style={{width: "50vw", height: "20vh"}}></div>
                <h2 style={{color: 'rgb(178, 234, 230)', marginLeft: "40px"}}>统一身份验证</h2>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的邮箱',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>


                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <div onClick={() => {
                            navigate("/");
                        }} style={{color: 'blue', textAlign: 'center', marginRight: '80px'}}>普通登录
                        </div>
                        <Button type="primary" htmlType="submit" style={{
                            backgroundColor: 'rgb(178, 234, 230)',
                            width: '140px',
                            height: "40px",
                            marginTop: '20px'
                        }}>
                            登录
                        </Button>
                        <Button onClick={() => {
                            form.resetFields()
                        }} style={{marginLeft: "40px", width: '140px', height: "40px"}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
                <MyNotification notiMsg={notiMsg}/>
            </div>
        </div>
    )
}